import { useState, useEffect } from 'react';
import { Button } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getLimitBankListOp } from './service';
import styles from './index.module.less';

const BankLimitModal = ({ visible, bankList, handleClose }) => {

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    if (visible && !data.length) {
      if(bankList){
        setData(bankList);
      }else{
        getLimitBankList();
      }
    }
  }, [visible])

  const getLimitBankList = async () => {
    setLoading(true);
    const { data, success } = await getLimitBankListOp();
    if (success) {
      setData(data);
    }
    setLoading(false);
  }

  return (<>
    <CommonModal
      visible={visible}
      title='支持银行和充值限额'
      width={442}
      onCancel={handleClose}
      footer={[<Button key='close' type='primary' onClick={handleClose}>关闭</Button>]}
    >
      <p className={styles.tHeader} style={{ borderTop: '1px solid #E95403', borderBottom: '1px solid #E95403' }}>
        <span>支持银行</span>
        <span>单笔限额（元）</span>
        <span>单日限额（元）</span>
      </p>
      <div style={{ borderBottom: '1px solid #E95403' }}>
        {data.map(item => {
          return (<p key={item.name} className={styles.tBody}>
            <span>{item.name}</span>
            <span>{item.oneMoney}</span>
            <span>{item.dayMoney}</span>
          </p>)
        })}
      </div>
      <CommonLoading loading={loading} />
    </CommonModal>
  </>)
}

export default BankLimitModal;